<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Threepipe R3F React/JSX + WebGI</title>
    <style>
        html, body, #root{
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }
        body {
            overflow: hidden;
        }
    </style>
    <!-- Import maps polyfill -->
    <!-- Remove this when import maps will be widely supported -->
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
              "three": "./../../dist/index.mjs",
              "threepipe": "./../../dist/index.mjs",
              "react": "https://esm.sh/react@19",
              "react-dom/client": "https://esm.sh/react-dom@19/client",
              "react/jsx-runtime": "https://esm.sh/react@19/jsx-runtime",
              "@react-three/fiber": "https://esm.sh/@react-three/fiber@9.3.0?external=react,react-dom,three",
              "@threepipe/plugin-r3f": "./../../plugins/r3f/dist/index.mjs",
              "@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs",
              "@threepipe/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@0.5.6/dist/index.mjs"
            }
        }
    </script>

    <script type="module" src="../examples-utils/global-loading.mjs"></script>
    <script type="module" src="../examples-utils/simple-code-preview.mjs"></script>
    <!-- Include Babel for JSX transformation -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script id="example-script" type="text/babel" data-type="module">
    import React from 'react'
    import {createRoot} from 'react-dom/client'
    import {ViewerCanvas, Asset, Model, useViewer} from '@threepipe/plugin-r3f'
    import {
        BaseGroundPlugin, GBufferPlugin,
        LoadingScreenPlugin,
        ProgressivePlugin,
        SSAAPlugin,
        SSAOPlugin,
        _testFinish, _testStart
    } from 'threepipe';
    import {TweakpaneUiPlugin} from '@threepipe/plugin-tweakpane';
    import {
        BloomPlugin,
        SSReflectionPlugin,
        TemporalAAPlugin,
    } from '@threepipe/webgi-plugins';

    _testStart()

    function Watch() {
        const viewer = useViewer()
        return <Asset url={'https://samples.threepipe.org/demos/classic-watch.glb'}
               importConfig={true}
               onLoad={(asset)=>{
                   console.log('Asset Loaded', asset)
                   // Configure plugin properties after loading the file
                   const ground = viewer.getPlugin(BaseGroundPlugin)
                   if(ground){
                       ground.material.roughness = 0
                       ground.material.metalness = 0.8
                   }
                   const bloom = viewer.getPlugin(BloomPlugin)
                   if(bloom){
                       bloom.pass.threshold = 2
                   }
                   viewer.scene.environmentIntensity = 0.5 // Set the environment map intensity

               }}
        />
    }

    function App(){
        return <div style={{
            position: 'relative',
            width: '80vw',
            height: '80vh',
            margin: '10vh 10vw',
            borderRadius: '0.5rem',
            boxShadow: 'rgba(0, 0, 0, 0.25) 0px 25px 50px -12px'
        }}>
            <ViewerCanvas
                id="three-canvas"
                style={{
                    width: "100%",
                    height: "100%",
                    borderRadius: "0.5rem",
                }}
                useR3FLoop={false}
                viewer={{
                    msaa: true,
                }}
                plugins={[
                    // Show a loading screen while the model is downloading
                    LoadingScreenPlugin,
                    ProgressivePlugin,
                    // Enable progressive rendering and SSAA
                    GBufferPlugin,
                    TemporalAAPlugin,
                    SSAAPlugin,
                    SSAOPlugin,
                    SSReflectionPlugin,
                    BloomPlugin,
                    // Add a ground below the model
                    BaseGroundPlugin
                ]}
                onMount={async (viewer) => {
                    console.log('Loaded Viewer', viewer)
                    // Add a plugin with a debug UI for tweaking parameters
                    const ui = viewer.addPluginSync(new TweakpaneUiPlugin(true));
                    // Add some debug UI elements for tweaking parameters
                    ui.setupPlugins(SSAAPlugin)
                    ui.setupPlugins(SSReflectionPlugin)
                    ui.setupPlugins(BaseGroundPlugin)
                    ui.setupPlugins(SSAOPlugin)
                    ui.appendChild(viewer.scene.uiConfig, {expanded: true})

                    _testFinish()
                }}
            >
                <React.Suspense fallback={<mesh>
                    <boxGeometry args={[1, 1, 1]} />
                    <meshStandardMaterial color="orange" />
                </mesh>}>
                </React.Suspense>
                <Watch/>
            </ViewerCanvas>
        </div>
    }

    createRoot(document.getElementById('root')).render(<App/>)
</script>
</body>
</html>
